<template>
  <div class="hv-designer-layer-panel-tree" v-hv-scrollbar>
    <template v-if="layerTreeData && layerTreeData.length > 0">
      <hv-designer-layer-panel-node :treeData="layerTreeData" :level="0" />
    </template>
    <div v-else class="hv-designer-layer-panel-tree-empty">
      <hv-custom-empty description="暂无图层！" />
    </div>
  </div>
</template>

<script lang="ts">
import CommonUtil from "@/visual/commons/utils/common-util";
import DashboardUtil from "@/visual/commons/utils/dashboard-util";
import { layerPanelConfig } from "@/visual/configs/dashboard-conifg";
import DashboardEvent from "@/visual/events/dashboard-event";
import { defineComponent, onMounted, ref, watch } from "vue";

import DesignerLayerPanelNode from "./DesignerLayerPanelNode.vue";

export default defineComponent({
  name: "DesignerLayerPanelTree",
  components: {
    hvDesignerLayerPanelNode: DesignerLayerPanelNode,
  },
  props: {
    layerData: {
      type: Array,
      default: () => [],
    },
  },
  setup(props) {
    const layerTreeNodeType = ref<any>(layerPanelConfig.layerTreeNodeType);

    const layerTreeData: any = ref([]);

    watch(
      () => props.layerData,
      (val) => {
        layerTreeData.value = val;
      },
      { deep: true, immediate: true }
    );

    /**
     * 添加图层组
     */
    const addGroup = () => {
      const group = {
        id: CommonUtil.shortUUID(),
        label: layerPanelConfig.groupComponent.label + CommonUtil.shortUUID(),
        img: layerPanelConfig.groupComponent.img,
        checked: false,
        type: layerTreeNodeType.value.group,
        open: true,
        level: 1,
        children: [],
        unstructuredData: {
          isEditLabel: false,
        },
      };

      layerTreeData.value[0].children.push(group);

      //添加图层图层组
      DashboardEvent.getAddLayerGroupEvent().next(group);
    };

    /**
     * 删除勾选的节点
     */
    const deleteCheckedNodes = () => {
      DashboardUtil.deleteCheckedTreeNodes(
        layerTreeData.value[0].children,
        (delNode: any) => {
          DashboardEvent.getDeleteLayerNodeEvent().next(delNode);
        }
      );

      layerTreeData.value[0].checked = false;
    };

    /**
     * 初始化
     */
    const init = () => {
      // 添加组件
      DashboardEvent.getCurrentInsertComponentEvent().subscribe(
        (currentComponent: any) => {
          const comp = {
            id: currentComponent.id,
            label: currentComponent.label,
            img: currentComponent.img,
            checked: false,
            type: layerTreeNodeType.value.layer,
            open: false,
            level: 1,
            unstructuredData: {
              isEditLabel: false,
            },
          };
          layerTreeData.value[0].children.push(comp);
        }
      );

      // 拖动组件
      DashboardEvent.getDragLayerNodeEvent().subscribe((data: any) => {
        // 删除拖动的原组件（layerTreeData去除根）
        DashboardUtil.deleteTreeChildrenNodeById(
          layerTreeData.value[0].children,
          data.dragComp.id,
          data.success
        );
      });

      //子节点checkbox选择事件
      DashboardEvent.getLayerChildrenNodeCheckedEvent().subscribe(() => {
        const promise = new Promise((resolve) => {
          layerTreeData.value[0].checked = false;
          DashboardUtil.treeNodeIsChecked(layerTreeData.value[0].children, resolve);
        });

        promise.then((checked: boolean) => {
          layerTreeData.value[0].checked = checked;
        });
      });

      //添加子图层组
      DashboardEvent.getAddSubLayerGroupEvent().subscribe((data: any) => {
        data.parentComp && !data.parentComp.children && (data.parentComp.children = []);
        data.newGroupComp.unstructuredData = {
          isEditLabel: false,
        };
        data.parentComp.children.push(data.newGroupComp);
      });

      //图层上移
      DashboardEvent.getLayerUpEvent().subscribe((currentComponent: any) => {
        DashboardUtil.treeNodeUpById(
          layerTreeData.value[0].children,
          currentComponent.id,
          () => {}
        );
      });

      //图层下移
      DashboardEvent.getLayerDownEvent().subscribe((currentComponent: any) => {
        DashboardUtil.treeNodeDownById(
          layerTreeData.value[0].children,
          currentComponent.id,
          () => {}
        );
      });

      //图层置顶
      DashboardEvent.getLayerToTopEvent().subscribe((currentComponent: any) => {
        DashboardUtil.treeNodeToTopById(
          layerTreeData.value[0].children,
          currentComponent.id,
          () => {}
        );
      });

      //图层置底
      DashboardEvent.getLayerToBottomEvent().subscribe((currentComponent: any) => {
        DashboardUtil.treeNodeToBottomById(
          layerTreeData.value[0].children,
          currentComponent.id,
          () => {}
        );
      });

      //图层移动到指定位置
      DashboardEvent.getLayerMoveToIndexEvent().subscribe((data: any) => {
        console.info(data);
        DashboardUtil.treeNodeMoveToIndex(
          layerTreeData.value[0].children,
          data.dragComp.id,
          data.targetIndex,
          () => {}
        );
      });

      //图层复制
      DashboardEvent.getLayerCopyEvent().subscribe((data: any) => {
        DashboardUtil.getTreeNodeIndexAndListById(
          layerTreeData.value[0].children,
          data.comp.id,
          (index: number, list: any) => {
            const newComp = {
              ...data.comp,
              id: data.id,
              label: data.comp.label + "副本" + data.id,
            };

            data.comp.children && (newComp.children = []);
            DashboardUtil.treeInsertNode(list, index + 1, newComp);
          }
        );
      });
    };

    onMounted(() => {
      init();
    });

    return {
      layerTreeData,
      addGroup,
      deleteCheckedNodes,
    };
  },
});
</script>

<style lang="less" scoped>
@import "./DesignerLayerPanelTree.less";
</style>
